<template>
  <div class="DropdownTwoBtn" :style="!left ? 'padding: 28rpx 15rpx' : ''">
    <div class="left reset" v-if="reset"  @click="clickReset()">
      <image src="https://fangguaner.wm76.mtnet.ren/static/applet/image/refs.png" mode="widthFix" />
      重置
    </div>
    <div class="left" v-if="left && !reset" @click="clickLeft()">{{ left }}</div>
    <div
      class="right"
      @click="clickRight()"
      :style="!left ? 'width: 100%;border-radius: 10rpx;' : ''"
    >
      {{ right }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    left: {
      type: String,
    },
    right: {
      type: String,
    },
    reset: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    //触发组件左边按钮回调
    clickLeft() {
      this.$emit("clickLeft");
    },
    //触发组件右边按钮回调
    clickRight() {
      this.$emit("clickRight");
    },
    //触发重置
    clickReset(){
        this.$emit('clickReset')
    }
  },
};
</script>

<style scoped lang="less">
.DropdownTwoBtn {
  padding: 28rpx 50rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 80rpx;
  font-size: 24rpx;
  .left {
    width: 302rpx;
    height: 80rpx;
    background-color: #d5d5d5;
    border-radius: 40rpx;
    color: #282828;
        image{
            width: 41rpx;
            margin-right: 20rpx;
        }
  }
  .reset{
      color: #282828;
      font-size: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none !important;
  }
  .right {
    min-width: 302rpx;
    height: 80rpx;
    background-color: #d03b35;
    border-radius: 40rpx;
    color: #fff;
  }
}
</style>